<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>农田数据管理-温度数据</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_974748_wjk5z1f6gsl.css" media="all"/>
    <link rel="stylesheet" th:href="@{/static/admin/css/farmdataList.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/fonts/iconfont.css}" media="all"/>
    <link rel="stylesheet" th:href="@{//at.alicdn.com/t/font_974748_0ivq0nqh8i9j.css}" media="all"/>
    <link rel="stylesheet" th:href="@{//at.alicdn.com/t/font_974748_6xs2qg3yxbo.css}" media="all"/>

    <style>


        .site-doc-icon li {
            width: 222px;
        }

        .site-doc-icon li .layui-anim {
            width: 150px;
            height: 150px;
            line-height: 150px;
            margin: 0 auto 10px;
            text-align: center;
            background-color: #009688;
            cursor: pointer;
            color: #fff;
            border-radius: 50%;
        }

        .lastStyle {
            border-style: inset;
            border-width: 3px;
            border-radius: 10px;
        }

        .lastStyle:hover {
            border-style: inset;
            border-width: 5px;
            border-radius: 10px;
            border-color: #1E9FFF;
        }

        .clearfixTop {
            width: 980.7px;
            height: 110px;
            position: fixed;
            z-index: 99;
            margin-bottom: 120px
        }

        .clearfixinside {
            width: 94px;
        }

    </style>
</head>
<body>
<div class="wrap-container welcome-container">
    <div class="row">
        <div class="welcome-left-container col-lg-9" style="padding-top: 15px">
            <div class="data-show">
                <ul class="clearfix clearfixTop">
                    <li class="col-sm-12 col-md-3 col-xs-12">
                        <a href="javascript:;" class="" style="height: 97.2px">
                            <div class="icon-bg  f-l">
                                <span class="iconfont" style="color: #1E9FFF;font-size: 48px;">&#xe66e;</span>
                            </div>
                            <div class="right-text-con">
                                <p class="name"><span id="location" style="font-size: 20px;" th:text="${firstFarm.location}"></span></p>
                                <p><span id="name" style="font-size: 16px;" th:text="${firstFarm.name}"></span></p>
                            </div>
                        </a>
                    </li>
                    <shiro:hasPermission name="farm:farmdata:temper">
                        <li class="col-sm-12 col-md-3 col-xs-12">
                            <a href="javascript:;" class="clearfix">
                                <div class="icon-bg bg-org f-l">
                                    <span class="iconfont">&#xe6a2;</span>
                                </div>
                                <div class="right-text-con">
                                    <p class="name"><span class="color-org" id="standardTemperature" th:text="${firstFarm.temperature}"></span>标准
                                        <span class="iconfont">&#xe628;</span></p>
                                    <p><span class="color-org" id="temperature" th:text="${firstFarm.temperature}">89</span>当前
                                        <span class="iconfont">&#xe628;</span></p>
                                </div>
                            </a>
                        </li>
                    </shiro:hasPermission>
                   <!-- <shiro:hasPermission name="farm:farmdata:hum">
                        <li class="col-sm-12 col-md-3 col-xs-12">
                            <a href="javascript:;" class="clearfix">
                                <div class="icon-bg bg-blue f-l">
                                    <span class="iconfont">&#xe63b;</span>
                                </div>
                                <div class="right-text-con">
                                    <p class="name"><span class="color-blue" th:text="${firstFarm.humidity}"></span>标准<span class="iconfont">
                                        &#xe628;</span></p>
                                    <p><span class="color-blue" id="humidity" th:text="${firstFarm.humidity}">189</span>当前
                                        <span class="iconfont">&#xe628;</span></p>
                                </div>
                            </a>
                        </li>
                    </shiro:hasPermission>
                    <shiro:hasPermission name="farm:farmdata:sun">
                        <li class="col-sm-12  col-md-3 col-xs-12">
                            <a href="javascript:;" class="clearfix">
                                <div class="icon-bg bg-green f-l">
                                    <span class="iconfont">&#xe609;</span>
                                </div>
                                <div class="right-text-con">
                                    <p class="name"><span class="color-green" th:text="${firstFarm.illumination}"></span>标准<span
                                            class="iconfont">&#xe60f;</span></p>
                                    <p><span class="color-green" id="illumination" th:text="${firstFarm.illumination}">221</span>当前<span
                                            class="iconfont">&#xe60f;
                                    </span></p>
                                </div>
                            </a>
                        </li>
                    </shiro:hasPermission>-->
                </ul>
            </div>
            <!--图表-->
            <div class="chart-panel panel panel-default" style="width: 949.1px;height: 460px;position: fixed;margin-top: 100px;padding:
             0px">
                <!--<button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger allSee">全屏图表</button>-->
                <div class="panel-body" id="chart" style="height: 450px;width:940px;padding: 0px;margin-top: 10px">
                </div>
            </div>
        </div>
        <div class="welcome-edge col-lg-3">
            <div class="" style="margin-top: 0;margin-bottom: 150px;width: 305.3px;position: fixed;z-index: 99;">
                <div class="panel-header" style="padding: 2px;background-color: #393D49">
                    <button class="layui-btn layui-btn-fluid layui-btn-lg layui-btn-normal" style="font-size: large;">我的农田</button>
                </div>
            </div>
            <!--农田信息-->
            <div style="margin-top: 54px;position: relative" class="site-doc-icon site-doc-anim ">
                <div class="lastStyle panel panel-default contact-panel  animClick"
                     th:each="farm,farmStat:${farmList}" th:id="${farmStat.count}" th:onclick="|changeBgcolor(${farmStat.count})|"
                     style="color: #5a98de">
                    <div class="panel-header" style="height: 10px">名称:<span th:text="${farm.name}">110</span></div>
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">

                        <div class="panel-body" style="height: 50px">
                            <div class="layui-row">
                                <div class="layui-col-md7">
                                    <input hidden id="farmId" th:value="${farm.id}"/>
                                    <!--<p>索引:<span id="farmId" th:text="${farmStat.index}+${farm.id}"></span></p>-->
                                    <!--<p>id：<span  th:text="${farm.id}"></span></p>-->
                                    <p>地址：<span th:text="${farm.location}"></span></p>
                                    <p>面积：<span th:text="${farm.size}"></span>&nbsp;㎡</p>
                                    <p>备注：<span th:text="${farm.remarks}"></span></p>
                                </div>
                                <div class="layui-col-md4  layui-col-md-offset1 ">
                                    <div class="layui-row layui-anim" data-anim="layui-anim-scaleSpring">
                                        <!--<input id="id" name="id" type="hidden" th:value="${farm.id}"/>-->
                                        <button class="layui-btn layui-btn-radius layui-btn-normal"
                                                th:onclick="|lookFarmData(${farm.id})|">查看
                                        </button>
                                    </div>
                                    <div class="layui-row layui-anim" style="margin-top: 4px" data-anim="layui-anim-scaleSpring">
                                        <!--   <button class="layui-btn layui-btn-radius"
                                                   th:onclick="|deepLookFarmData(${farm.id})|">详情
                                           </button>-->
                                        <a class="layui-btn layui-btn-radius" th:href="@{/farm/farmdata/detail(id=${farm.id})}">详情</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>

                </div>
            </div>

        </div>
    </div>
</div>
<script>

    /*function deepLookFarmData(id){
        alert(id);
    }*/
    function lookFarmData(id) {
        var myChart = echarts.init(document.getElementById('chart'));
        $.post("/farm/farmdata/temper",{id:id},function(data){
            if(data.success){
                option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    toolbox: {
                        feature: {
                            dataView: {show: true, readOnly: false},
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    legend: {
                        data: ['温度']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: data.dateTimeArray,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '温度',
                            min: 0,
                            max: 50,
                            position: 'left',
                            offset: 10,
                            interval: 5,
                            axisLabel: {
                                formatter: '{value} °C'
                            }
                        }/*,
                        {
                            type: 'value',
                            name: '湿度/光照',
                            min: 0,
                            max: 100,
                            position: 'right',
                            offset: 10,
                            interval: 20,
                            axisLabel: {
                                formatter: '{value}RH/lux'
                            }
                        }*//*,
                            {
                                type: 'value',
                                name: '光照',
                                min: 0,
                                max: 100,
                                position: 'right',
                                offset: 60,
                                interval: 20,
                                axisLabel: {
                                    formatter: '{value}lux'
                                }
                            }*/
                    ],
                    series: [
                        {
                            name: '温度',
                            type: 'line',
                            data: data.temperArray
                        }/*,
                        {
                            name: '湿度',
                            type: 'bar',
                            yAxisIndex: 1,
                            data: data.humidiArray
                        },
                        {
                            name: '光照',
                            type: 'line',
                            yAxisIndex: 1,
                            data: data.illumiArray
                        }*/
                    ]
                };
                myChart.setOption(option);
                $("#name").text(data.farmTop.name);
                $("#location").text(data.farmTop.location);
                $("#temperature").text(data.mostNewFarmData.temperature);
                $("#standardTemperature").text(data.farmTop.temperature);
//                $("#humidity").text(data.mostNewFarmData.humidity);
//                $("#standardHumidity").text(data.farmTop.humidity);
//                $("#illumination").text(data.mostNewFarmData.illumination);
//                $("#standardIllumination").text(data.farmTop.illumination);
            }else{
                layer.alert(data.message, {
                    skin: 'layui-layer-molv' //样式类名
                    , closeBtn: 0
                });
            }
        });
    }
</script>
<!--<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>-->
<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{//at.alicdn.com/t/font_974748_wjk5z1f6gsl.js}"></script>
<script type="text/javascript" th:src="@{//at.alicdn.com/t/font_974748_6xs2qg3yxbo.js}"></script>
<script type="text/javascript" th:src="@{/static/admin/js/farmdata/farmdataTemper.js}"></script>
<script type="text/javascript" th:src="@{/static/echarts/echarts.common.min.js}"></script>
</body>
</html>